<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用canvas绘制图形</title>
		<script type="text/javascript">
			window.onload = function() {
				var canvas1 = document.getElementById('d1');
				var ctx = canvas1.getContext('2d');
				ctx.strokeStyle = '#FF0000';
				ctx.strokeRect(100, 25, 100, 100);
				var canvas2 = document.getElementById("d2");
				var ctx = canvas2.getContext("2d");
				ctx.beginPath();
				ctx.strokeStyle = '#FF0000';
				ctx.arc(150, 75, 50, 0, Math.PI * 2, false); //按照指定的路径绘制弧线

				ctx.stroke();
				var canvas3 = document.getElementById("d3");
				ctx = canvas3.getContext('2d');
				ctx.strokeStyle = '#FF0000';
				ctx.ellipse(150, 75, 100, 60, 0, 0, Math.PI * 2, true);
				ctx.stroke();
			}
		</script>
	</head>

	<body>
		<canvas id="d1" style="border:1px solid red ;"></canvas>
		<canvas id="d2" style="border:1px solid red ;"></canvas>
		<canvas id="d3" style="border:1px solid red ;"></canvas>

	</body>

</html>
